<!DOCTYPE html style="width:100%">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/jquery.moment.js"></script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        .panel-body li{
            list-style: none!important;
            cursor: pointer!important;
        }
        .datagrid-wrap,.datagrid-view,.datagrid-view2,.datagrid-header,.datagrid-header-inner,.datagrid-body,.datagrid-footer,.datagrid-htable,.datagrid-btable{
            width:100%!important;
        }
        
    </style>
</head>

<body style="width:90%">
    <table id="dg" style="height:100%">
    </table>

    <div id="tb" style="padding:2px 5px;">
        用户名: <input class="easyui-textbox" style="width:110px" id="searchName">
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="searchData">Search</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" id="addData">新增数据</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" id="removesData">批量删除</a>
        <input id="cc" value="全部">

    </div>


    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="closed:true,iconCls:'icon-save',modal:true" style="width:600px;height:400px;padding:10px">
        <form id="ff" method="post">
            <input type="hidden" name="_id" style="width:100%">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'名称:',required:true">
                <input class="easyui-textbox" name="price" style="width:100%" data-options="label:'价格:',required:true">
                <input class="easyui-textbox" name="turnover" style="width:100%" data-options="label:'成交量:',required:true">
                <input class="easyui-textbox" name="comments" style="width:100%" data-options="label:'评论数:',required:true">
                <input class="easyui-textbox" name="partyaksa" style="width:100%" data-options="label:'库存:',required:true">
                <input class="easyui-textbox" name="preferential" style="width:100%" data-options="label:'优惠价:',required:true">
                <input class="easyui-textbox" name="pic" style="width:100%" data-options="label:'图片:',required:true">
                <input class="easyui-textbox" name="kinds" style="width:100%" data-options="label:'选择样式:',required:true">
                <input class="easyui-textbox" name="superior" style="width:100%" data-options="label:'商品类别:',required:true">
            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
</body>

</html>
<script>
    var nodeSelected;
    
    var host='http://10.31.156.62:3000'
    

    $('#dg').datagrid({
        url: `${host}/producttype/list/2`,
        pagination: true,
        method: 'post',
        columns: [[
            { field: 'ck',width:'3%', checkbox: true,align:"center"},
            { field: 'name', title: '姓名',width:'24%',align:"center"},
            { field: 'price', title: '价格',width:'4%',align:"center"},
            { field: 'turnover', title: '交易完成数',width:'4%',align:"center"},
            { field: 'comments', title: '评论数',width:'4%',align:"center"},
            { field: 'partyaksa', title: '库存',width:'4%',align:"center"},
            { field: 'preferential', title: '优惠价',width:'4%',align:"center"},
            { field: 'pic', title: '商品图片',width:'10%',align:"center"},
            { field: 'kinds', title: '种类',width:'10%',align:"center"},
            { field: 'superior', title: '产品类型',width:'8%',align:"center"},
            {
                field: '_id', title: '用户操作', width: '6%',align:"center",
                formatter: function (value, row, index) {
                    return `<a href="javascript:editData('${row._id}')">修改</a> <a href="javascript:deleData('${row._id}')">删除</a>`;
                }
            }
        ]],
        toolbar: '#tb'
    });

    function submitForm() {
        
        $('#ff').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {

                    var formData = $("#ff").serializeJSON();
                    if (formData._id.length > 0) {
                        // 修改操作
                        $.ajax({
                            url: `${host}/producttype/data/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');
                        })
                    } else {
                        // 新增操作
                        delete formData._id;
                        $.ajax({
                            url: `${host}/producttype/data`,
                            type: 'post',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close')
                            $('#dg').datagrid('reload');

                        })
                    }

                }
            }
        });
    }
    function clearForm() {
        $('#ff').form('clear');
    }

    function deleData(id) {
        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `${host}/producttype/data/${id}`,
                    type: 'delete'
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });
    }

    function editData(id) {
        $('#ff').form('clear');


        $.ajax({
            url: `${host}/producttype/data/${id}`,
            type: 'get'
        }).then(res => {
            $('#ff').form('load', res);
            $('#dlg').dialog('open');
        })

    }

    // $("#addData").click(function () {
    //     nodeSelected=
    //     $('#ff').form('clear');
    //     $('#dlg').dialog('open')
    // })

    $("#searchData").click(function () {
        $('#dg').datagrid({
            url: `${host}/producttype/list/2`,
            method: 'post',
            queryParams: {
                name: $("#searchName").val()
            }
        });
    })

    $("#removesData").click(function () {
        var dgSelections = $('#dg').datagrid('getSelections');
        var ids = [];
        for (let i = 0; i < dgSelections.length; i++) {
            ids.push(dgSelections[i]._id);
        }


        $.messager.confirm('删除确认框', '你确认要删除该记录码?', function (r) {
            if (r) {
                $.ajax({
                    url: `${host}/producttype/data/removes`,
                    type: 'post',
                    data: {
                        ids: ids.toString()
                    }
                }).then(res => {
                    $('#dg').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '已经成功删除记录.',
                        showType: 'show'
                    });
                })
            }
        });

    })

    $('#cc').combotree({
        url: `${host}/cate/list/2`,
        method: 'post',
         required: true,
        onSelect: function(node){
            $('#cc').combotree('setValue',node.text);
            var id=node._id;
            $.ajax({
                url: `${host}/cate/list1/2`,
                type: 'post',
                data: {
                    _id: id
                }
            }).then(res=>{
            console.log(res);
                $('#dg').datagrid({
                    url: `${host}/producttype/list1/2`,
                    method: 'post',
                    queryParams: {
                        ids: res.toString()
                    }
                });
            });

        }
    });

    
    
</script>
